<template>
  <div class="tableC">
    <el-table
      :data="
        filterTableData.slice(
          (data.currentPage - 1) * data.pagesize,
          data.currentPage * data.pagesize
        )
      "
      style="width: 100%"
    >
      <el-table-column label="评论图片">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img class="userAvatar" :src="scope.row.commentsHead" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="commentsTime" />
      <el-table-column label="店铺名" prop="shopName" />

      <el-table-column label="评论内容" prop="comments">
        <template #default="scope">
          <span>{{ scope.row.comments }}</span>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="搜索商家" />
        </template>
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="fy"
      layout="prev, pager, next"
      @current-change="currentShowPage"
      :total="data.total"
      background
    >
    </el-pagination>
  </div>
</template>

<script>
import { computed, ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
export default {
  setup() {
    const data = reactive({
      // 存放评论的数组
      result: [],
      total: 0, //默认数据总数
      pagesize: 5, //每页的数据条数
      currentPage: 1, //默认开始页面
    });
    function getData() {
      axios
        .get("http://120.76.246.120:4455/Sapi/allzhu")
        .then(({ data: res }) => {
          if (res.code === 200) {
            // 修改总条数
            data.result = res.data;
            // 修改展示条数
            data.total = 20 + res.data.length;
          }
        });
    }
    getData();

    // 过滤器
    const search = ref("");
    const filterTableData = computed(() =>
      data.result.filter(
        (data) => !search.value || data.shopName.includes(search.value)
      )
    );

    // 删除
    const handleDelete = (index, row) => {
      axios
        .get("http://120.76.246.120:4455/Sapi/delremark?id=" + row.id)
        .then(({ data: res }) => {
          if (res.code === "删除成功") {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          }
        })
        .catch((error) => {
          console.log(error.message);
        });
    };

    // 获取当前点击页面
    function currentShowPage(curPage) {
      data.currentPage = curPage;
    }

    return {
      filterTableData,
      search,
      handleDelete,
      currentShowPage,
      data,
    };
  },
};
</script>

<style scoped>
.tableC {
  width: 100%;
  margin: 20px;
  border-radius: 10px;
}
.userAvatar {
  width: 100px;
  height: 100px;
}
</style>